<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ注册</title>
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入标题图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入本页面样式 -->
    <link rel="stylesheet" href="./css/register.css">
</head>

<body>
    <!-- 背景图片 -->
    <div class="video-wrap"></div>
    <!-- 头部` -->
    <div class="header-wrap__inner">
        <div class="header-wrap__hd">
            <a href="#" class="header-wrap__logo" title="腾讯QQ"></a>
        </div>
        <div class="header-wrap__bd">
            <div class="nav-wrap">
                <div class="nav-wrap__inner">
                    <!-- QQ靓号 -->
                    <div class="nav-wrap__item">
                        <div class="lianghao-wrap">
                            <div class="lianghao-wrap__hd">
                                <a class="lianghao-wrap__text lianghao-wrap__text-link">QQ靓号</a>
                            </div>
                        </div>
                    </div>
                    <!-- 简体中文 -->
                    <div class="nav-wrap__item">
                        <div class="lang-wrap">
                            <span class="nav-wrap__text lang-wrap__text">
                                简体中文
                            </span>
                        </div>
                    </div>
                    <div class="nav-wrap__item">
                        <span class="nav-wrap__text">意见反馈</span>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- 整体 -->
    <div class="main-wraper">
        <div class="main">
            <!-- <div class="verification">
                
            </div> -->
            <div class="form">
                <div>
                    <div class="welcome">欢迎注册QQ</div>
                    <div class="header">每一天，乐在沟通。</div>
                </div>
                <!-- 表单 -->
                <form class="qq-form" autocomplete="off">
                    <div data-prop="username" class="qq-form-item input-area">
                        <input name="username" type="text" placeholder="昵称" class="username ">
                        <span class="msg">请输入正确昵称(4~10位数)</span>
                    </div>
                    <div data-prop="password" class="qq-form-item
                    input-area">
                        <input name="password" type="password" placeholder="密码"
                        class="password">
                        <span class="msg">请输入正确昵称(6~16位数)</span>
                    </div>
                    <div style="display: none;" data-prop="phone" class="qq-form-item">
                        <input name="phone" type="text" placeholder="手机号码   " class="phone">
                        <span class="msg">请输入正确的手机号</span>
                    </div>
                    <div style="display: none;" data-prop="code" class="qq-form-item item-code">
                        <input  style="display: none;" class="pwdCode" name="code" type="text" placeholder="短信验证码">
                        <span class="msg"></span>
                        <a style="display: none;" class="code" href="javascript:;">发送验证码</a>
                    </div>
                    <!-- 我同意 -->
                    <div style="display: none;" class="qq-form-wrap">
                        <div class="qq-wrap_hd">
                            <input class="check agreement-wrap__icon agreement-wrap__icon-input" type="checkbox" name="agree"
                                id="agree" data-bind="checked: agree">
                        </div>
                        <div class="qq-wrap_bd">
                            <span class="qq-wrap-text">我已阅读并同意<a href="https://ti.qq.com/agreement/index.html"
                                    class="text-link">服务协议</a>和<a href="https://ti.qq.com/doc/redirect/qq-privacy-guild"
                                    class="text-link">QQ隐私保护指引</a></span>
                        </div>
                    </div>
                    <div style="display: none;">
                        <input id="get_acc" type="submit" class="btn-submit btnn" value="立即注册" tabindex="8">
                    </div>
                    <div>
                        <input id="get_acc" type="submit" class="btn-submit btns" value="登录" tabindex="8">
                    </div>
                </form>

                <!-- 底部 -->
                <div class="footer">
                    <span>Copyright ©1998-2022Tencent All Rights Reserved.</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入jste -->
    <script src="./js/register.js"></script>
    <script>
        // 获取登录按钮
        const btm = document.querySelector('.btns')
        btm.addEventListener('click',function(e){
            e.preventDefault()
            const newArr = JSON.parse(localStorage.getItem('vel'))
            for(let i = 0;i<newArr.length;i++){
                const passwordValue = document.querySelector('.password').value.trim()
                const usernameValue = document.querySelector('.username').value.trim()
                if(newArr[i].user ==usernameValue && newArr[i].password == passwordValue){
                    alert('登录成功')
                    return window.location.href = '../郁坤/index.html'
                }
            }
            alert('登录失败')
    })
    </script>
</body>

</html>